
<template>
    <div class='booklist-container'>
        <div class="list-top">
            <el-checkbox
                v-model="checkAll"
                :indeterminate="isIndeterminate"
                @change="handleCheckAllChange"
            >全部文件</el-checkbox>
            <span  class="top-right">共 {{ bookList.length }} 个</span>
            <span v-if="checkedBooks.length > 0" class="top-right">已选 {{ checkedBooks.length }} 个/</span>
        </div>
        <div class="checkbox-box">
            <el-checkbox-group
                v-model="checkedBooks"
                @change="handleCheckedBookChange"
            >
                <el-row :gutter="30">
                    <el-col class="book-one" :span="6" v-for="book in bookList" :key="book.id">
                        <el-card shadow="never" @click="goToBookData(book)">
                            <el-checkbox :label="book.id">
                                <div class="book-box">
                                    <div class="book-left">
                                        <img src="src/assets/images/folder.png" class="left-img"/>
                                    </div>
                                    <div class="book-right">
                                        <div class="book-name">{{ book.name }}</div>
                                        <div class="book-abstract">{{ book.abstract }}</div>
                                        <div class="book-time">{{ book.create_time }}</div>
                                    </div>
                                </div>
                            </el-checkbox>
                        </el-card>
                    </el-col>
                </el-row>
            </el-checkbox-group>
        </div>
        
    </div>
</template>
<script setup lang='ts'>
// import { getBookList } from '@/ajax';
import { CirclePlusFilled, DeleteFilled, Document, Rank, Search } from '@element-plus/icons-vue';
import { defineProps, ref, reactive } from 'vue';

const props = defineProps({
    
})

const { proxy } = getCurrentInstance() as any;
const checkAll = ref(false)
const isIndeterminate = ref(false)
const checkedBooks = ref([])
const allBookIds = reactive([])
const bookCount = ref(0)
const bookList = [
    {
        id: 1,
        name: "机构基本信息",
        abstract: "机构基本信息合集",
        create_time: "2022–11-23 10:23"
    },
    {
        id: 2,
        name: "机构用户信息",
        abstract: "存放机构用户信息",
        create_time: "2022–11-23 10:23"
    },
    {
        id: 3,
        name: "绿色评价信息",
        abstract: "存放绿色评价信息",
        create_time: "2022–11-23 10:23"
    },
    {
        id: 4,
        name: "金融服务信息",
        abstract: "存放金融服务信息",
        create_time: "2022–11-23 10:23"
    },
    {
        id: 5,
        name: "热轧带肋钢筋",
        abstract: "存放热轧带肋钢筋绿色评价",
        create_time: "2022–11-23 10:23"
    },
    {
        id: 6,
        name: "热轧带肋钢筋信息",
        abstract: "存放热轧带钢筋信息",
        create_time: "2022–11-23 10:23"
    },
    {
        id: 7,
        name: "硅酸盐水泥产品",
        abstract: "存放硅酸盐水泥产品绿色评价",
        create_time: "2022–11-23 10:23"
    }
]

const handleCheckAllChange = (val: boolean) => {
  checkedBooks.value = val ? allBookIds : []
  isIndeterminate.value = false
}
const handleCheckedBookChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === bookList.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < bookList.length
}
const goToBookData = (book: any) => {
    const params = {
        'layer': 1,
        'book_name': book.name,
        'book_id': book.id,
        // 'pageNumber': 1,
        // 'pageSize': 20
    };
    proxy.$router.replace({ query: params })
    // proxy.$router.go(0)
}

// 获取bookList
const created = () => {
    // const params = {
    //     'pageNumber': 1,
    //     'pageSize': 1000
    // };
    // getBookList().then(res => {
    //     if (res.succ) {
    //         bookList.value = res.list
    //     }
    // });
    bookList.forEach((item: any) => {
        allBookIds.push(item.id)
    })
};

created();

</script>
<style lang='scss' scoped>
.booklist-container {
    .list-top {
        background: #F3F4F6;
        padding: 3px 10px;
        .top-right {
            float: right;
            line-height: 38px;
            color: #676A6C;
            margin-top: -3px;
        }
    }
    .checkbox-box {
        padding: 0 5px 20px;
    }
    .book-one {
        .book-box {
            display: flex;
            .book-left {
                .left-img {
                    width: 40px;
                    height: 40px;
                    margin: 11px 3px 0 5px;
                }
            }
            .book-right {
                margin-left: 10px;
                .book-name {
                    color: #262626;
                    line-height: 22px;
                }
                .book-abstract {
                    color: #676A6C;
                    line-height: 22px;
                }
                .book-time {
                    color: #94979E;
                    font-size: 13px;
                    line-height: 18px;
                }
            }
        }
    }
}
</style>
<style lang='scss'>
.booklist-container {
    .book-one {
        .el-card {
            border: none;
            height: 90px;
            margin-top: 30px;
            .el-card__body {
                padding: 5px 10px;
                height: 100%;
                .el-checkbox {
                    width: 100%;
                    height: 100%;
                    .el-checkbox__label {
                        width: 100%;
                    }
                }
            }
            &:hover{
                box-shadow: 1px 1px 3px 3px #DBDBDB86;
            }
        }
    }
}
</style>